<template>
	<button class="btn-shine" :class="`btn-shine-${shineColor}`" :style="[style]" :disabled="loading" @click="clickHandler">
		<view class="text uv-flex-row">
			<uv-loading-icon v-if="loading" size="18px" custom-style="margin-right: 4px;"></uv-loading-icon>
			<text>
				<slot>按钮</slot>
			</text>
		</view>
		<svg v-if="shine && shineColor == 'yellow'" xmlns="http://www.w3.org/2000/svg" width="176" height="32" viewBox="0 0 176 32" fill="none">
			<g filter="url(#filter0_f_147_53986)">
				<ellipse cx="88" cy="41.5" rx="69" ry="20.5" fill="#F2CB29" />
			</g>
			<defs>
				<filter id="filter0_f_147_53986" x="-1.1" y="0.9" width="178.2" height="81.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
					<feFlood flood-opacity="0" result="BackgroundImageFix" />
					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
					<feGaussianBlur stdDeviation="10.05" result="effect1_foregroundBlur_147_53986" />
				</filter>
			</defs>
		</svg>
		<svg v-if="shine && shineColor == 'red'" xmlns="http://www.w3.org/2000/svg" width="176" height="32" viewBox="0 0 176 32" fill="none">
			<g filter="url(#filter0_f_160_60428)">
				<ellipse cx="88" cy="41.5" rx="69" ry="20.5" fill="#BF2E2E" />
			</g>
			<defs>
				<filter id="filter0_f_160_60428" x="-1.1" y="0.9" width="178.2" height="81.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
					<feFlood flood-opacity="0" result="BackgroundImageFix" />
					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
					<feGaussianBlur stdDeviation="10.05" result="effect1_foregroundBlur_160_60428" />
				</filter>
			</defs>
		</svg>
	</button>
</template>
<script setup>
	import { computed } from 'vue';
	const emits = defineEmits(['click']);
	let status = '';
	const props = defineProps({
		loading: {
			type: Boolean,
			default: false
		},
		shine: {
			type: Boolean,
			default: false
		},
		shineColor: {
			type: String,
			default: 'yellow'
		},
		borderColor: {
			type: String,
			default: 'rgba(186, 186, 216, 0.60)'
		},
		background: {
			type: String,
			default: '#393945 !important'
		}
	})
	const style = computed(() => {
		const _style = {}
		if (!props.shine) {
			_style.borderColor = props.borderColor;
			_style.background = props.background;
		}
		return _style;
	})

	function clickHandler() {
		if (status == 'clicking') return;
		emits('click');
		status = 'clicking';
		setTimeout(() => {
			status = '';
		}, 200)
	}
</script>
<style scoped lang="scss">
	.btn-shine {
		position: relative;
		width: 176px;
		height: 45px;
		line-height: 43px;
		margin: 0;
		padding: 0;
		&-yellow {
			border: 2px solid #F2CB29;
			background: rgba(242, 203, 41, 0.30) !important;
		}
		&-red {
			border: 2px solid #BF2E2E;
			background: rgba(191, 46, 46, 0.30) !important;
		}
		.text {
			justify-content: center;
			align-items: center;
		}
		text {
			font-size: 16px;
			color: #fff;
		}
		svg {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
		}
		&:hover {
			opacity: 0.9;
		}
	}
</style>